<template>
	<scroll-view scroll-y class="container">
		<view class="head">
			<view class="left-icon">
				<uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons>
				<view @click="enterPersonalByType(news.author)"> 
					<image class="avatar" :src="news.author.portrait ? news.author.portrait : 'https://img0.baidu.com/it/u=3075622271,3356712518&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'" />
					{{news.author.userName}}
				</view>
			</view>
			<view v-if="attentionFlag" @click="attentionAuth()" class="btn">关注</view>
			<view v-else @click="attentionAuth()"  class="btn">已关注</view>
		</view>
		<view class="height"></view>
		<swiper class="swiper" :indicator-dots="true" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.32)">
			<swiper-item v-for="(item,index) in news.imgList"><image class="img" :src="item" /></swiper-item>
		</swiper>
		<view class="detail-title">{{news.title}}</view>
		<view class="nodes"><rich-text v-html="news.content"></rich-text></view>
		<view class="tags">
			<view @click="goTagNews(item)" class="t tag-item" v-for="item in tagList">
				<view class="tag-item-text"></view>
			{{item.tagName}}</view>

		</view>
		<view class="date-share">
			<view class="date">{{'编辑于' + news.createAt}}</view>
			<view class="share">
				<button open-type="share"></button>
				分享
			</view>
		</view>
		<!--资讯评论-->
		<view class="comment" v-if="closeShow">
			<view v-if="commentList.length != 0" class="haveComment">
				<view class="comment-item" v-for="(item,index) in commentList">
					<view class="comment-user">
						<view class="comment-userInfo">
							<image class="comment-portrait seo-goHome"
								 :src="item.portrait?item.portrait:'/static/image/wutouxiang.png'"
								 @click="goHome(item.userType,item.userId)"
							/>
							<view class="comment-userName">
								{{item.userName}}
							</view>
						</view>
						<!--                        <view class="attention-btn">关注</view>-->
					</view>

					<view class="comment-content seo-reply" @click="reply(1,item.id,item,index)">
						{{item.content +' '}}
						<view class="comment-content-createat">{{item.createAt.slice(5,11)}}</view>
					</view>
					<!--评论回复-->
					<view class="comment-reply">
						<view v-for="item2 in item.foldReplyList">
							<view style="margin-top: 31rpx"
								 v-if="item2.replyType ==1">
								<view class="reply-user">
									<view class="reply-userInfo">
										<image class="reply-portrait seo-goHome2"
											 :src="item2.ruPortrait?item2.ruPortrait:'/static/image/wutouxiang.png'"
											 @click="goHome(item2.ruType,item2.fromUid)"
										/>
										<view class="reply-name"><view>{{item2.fromUname}}</view></view>
									</view>
									<!--                                <view class="attention-btn">关注</view>-->
								</view>

								<view class="reply-content sep-reply2" @click="reply(2,item.id,item2,index)">
									{{item2.content +' '}}
									<view class="comment-content-createat">{{item2.createAt.slice(5,11)}}</view>
								</view>

							</view>
							<view class="sep-reply2" style="margin-top: 0.44rem" v-if="item2.replyType ==2"
								 @click="reply(2,item.id,item2,index)">
								<view class="reply-user">
									<view class="reply-userInfo seo-goHome2">
										<image class="reply-portrait "
											 :src="item2.ruPortrait?item2.ruPortrait:'/static/image/wutouxiang.png'"
											 @click="goHome(item2.ruType,item2.fromUid)"
										/>
										<view class="reply-name"><view>{{item2.fromUname}}</view></view>
									</view>
									<!--<view class="attention-btn">关注</view>-->
								</view>
								<view class="reply-content">
									回复<view class="reply-name">{{item2.toUname}}:</view>
									{{item2.content +' '}}
									<view class="comment-content-createat">{{item2.createAt.slice(5,11)}}</view>
								</view>
							</view>
						</view>

						<view v-if="item.ifFold" class="link seo-unFold" @click="unFold(index)">查看更多回复</view>
					</view>
					<!--分割线-->
					<view class="separate"></view>
				</view>
			</view>
			<view v-else class="noComment">
				<view class="noComment-text"> 暂无评论</view>
			</view>
		</view>
		
		

		<!-- <view class="comment" v-if="closeShow">
			<view v-if="commentList.length != 0">
				<view class="item" v-for="(item,index) in commentList" >
					<view class="comment-user">
						<view class=""></view>
					</view>
					<image @click= "goHome(item.userType,item.userId)" class="avatar" :src="item.portrait ? item.portrait : 'https://img0.baidu.com/it/u=3075622271,3356712518&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'" />
					<view class="info">
						<view class="name">{{item.userName}}</view>
						<view class="text">
							{{item.content + ''}}
							<view class="date">{{item.createAt.slice(5,11)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="height"></view>
		<view class="fixed-input">
			<view class="left-input">
			 <view class="sendComment" v-if="replyData.toUname">
                <image class="sendComment-img" src="https://m.nocexpo.com/statics/js/modules/h5/img/sendcomment.png"/>
                <input class="sendComment-input" :placeholder="replyStr" v-model="replyData.content"
                        id="rinput" @keyup.enter="sendReply" :focus="focus" />
            </view>

            <view class="sendComment" v-else>
                <image class="sendComment-img" src="https://m.nocexpo.com/statics/js/modules/h5/img/sendcomment.png"/>
                <input class="sendComment-input" type="text" v-model="comment"
                       id="cinput"
                       placeholder="说点什么..."  :focus="focus"/>
            </view>
           
			
			
			<!-- 	<uni-icons class="icon" color="#a1a0a0" type="compose" size="20"></uni-icons>
				<input v-model="comment" :placeholder="replyStr" /> -->

			</view>
			<view class="right">
				<view v-if="replyData.toUname" class="send seo-sendReply" @click="sendReply">发送</view>
				<view v-else class="send seo-sendNewsComment1" @click="sendNewsComment">发送</view>
				<!-- <view  class="btn" @click="sendNewsComment()">发送</view> -->
				<view class="icons">
					 <image v-if="news.likeNews" @click="cancelLike()"  class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan1.png" mode="widthFix" />
					 <image v-else @click="likeNews()" class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan0.png" mode="widthFix" />{{news.likeNewsCount}}

					  <image src="https://m.nocexpo.com/statics/js/modules/h5/img/comment.png" mode="widthFix"/>{{commentList.length}}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import imageTextApi from '@/api/imageText.js';
	import commonApi from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			nodes: '<p>我是富文本内容</p>',

			news: {
				id: '',//资讯id
				title: '',//资讯标题
				status: '',//状态,0-草稿,1-发布
				content: '',//资讯内容
				tags: [],//资讯标签列表
				imgList: [],//资讯图片列表
				author: '',//作者
				likeNews: '',//喜欢该资讯
				likeNewsCount: '',//喜欢该资讯人数
			},//资讯
			currentUser: '',//当前用户
			ifLike: false,//是否点赞
			ifCollect: false,//是否收藏
			ifJudged: false,//信息是否完善
			ifDisLike: false,//是否踩资讯
			comment: '',//评论
			commentList: [],//评论列表
			replyData: {commentId: '', replyType: '', toUid: '', toUname: '',content:''},//回复传递的对象
			attentionFlag: true,//是否收藏
			tagList: [],
			isShowFriend: false,
			newsList:[],
			newsList1: [],
			newsList2: [],
			closeShow:false,
			share_url:'',
			replyStr:'',
			focus:false,
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径

		};
	},
	async onLoad(options) {
		//获取当前用户
		const currentUserValue = await commonApi.currentUserAxios();
		this.currentUser = currentUserValue.data.session_user_h5;
		this.news.id = options.id
		// this.initSwiper();//初始化swiper
		this.getNewsDetail();//获取资讯详情
		this.getNewsComment();//获取资讯评论
		this.browseHistory();
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted() {
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.share_url = currentPage.$page.fullPath
	},
	onShareAppMessage: function () {//分享
		return {
			title: this.news.title,
      path: this.share_url + '&sourceUserId=' + uni.getStorageSync("userId"),
			desc: '@' + this.news.author.userName + '在金诺云展发布了动态，欢迎大家来围观',
			imageUrl: this.news.imgList[0],
			success: function (res) {
				console.info(res + '成功');
				wx.showToast({
					title: '分享成功',
				})
				// 转发成功
			},
			fail: function (res) {
				console.log(res + '失败');
				// 转发失败
			},
		 
		}
	 },
	/*分享朋友圈 */
	onShareTimeline: function() {
		return {
			title:   this.news.title,
      query: 'id=' + this.news.id + '&sourceUserId=' + uni.getStorageSync("userId"),
			imageUrl: this.news.imgList[0],
		}
	},
	methods: {
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.share_url,"图文详情")
			
		},
		goTagNews(item) {
			uni.navigateTo({
				url:'/pages/product/tag/tagNewsList?activeIndex=1&tagId=' + item.id,
				
			})
			// window.location.href = '/h5/tagNewsList.html?activeIndex=3&tagId=' + item.id;
		},

		// initSwiper() {
		// 	const self = this;
		// 	let imgSwiper = new Swiper('#img-swiper', {
		// 		pagination: {
		// 			el: '.swiper-pagination',
		// 			bulletActiveClass: 'my-bullet-active',
		// 		},
		// 		autoplay: true,//可选选项，自动滑动
		// 		observer: true,
		// 	})
		// },
	  /**
		 * 判断用户是否登陆
		 */
		ifLogin() {
			const self = this
			const result = commonApi.toRegistered(self.currentUser.type)
			if (!result) {
				return
			}
		},
		
		 goHome(userType, userId) {
			if (userType == 1) {
				uni.navigateTo({
					url:'/pages/product/showroom/showroom?userId'+ userId
				})
				// window.location.href = '/h5/cloudcomp.html?userId=' + userId;
			} else {
				uni.navigateTo({
					url: '/pages/person/anchorHomepage?userId='+ userId
				})
				// window.location.href = '/h5/anchorHomepage.html?userId=' + userId;	
			}
		},
		
		
		/**点击进入动态发布者主页
		 * @param {Object} user
		 */
		enterPersonalByType(user){
			commonApi.enterPersonalByType(user);
		},


		/**
		 * 获取资讯详情
		 */
		getNewsDetail() {
			imageTextApi.getNewsInfo(this.news.id).then(res => {
				this.news = res.data.news
				this.closeShow = true
				let imgListString = res.data.news.pictureUrl
				this.news.imgList = imgListString.split(',')
				if (this.news.attention) {
					this.attentionFlag = false
				}
				if (res.data.news.tagList) {
					for (let i = 0; i < res.data.news.tagList.length; i++) {
						res.data.news.tagList[i].tagName = '#' + res.data.news.tagList[i].tagName;
					}
				}
				this.tagList = res.data.news.tagList;
				// this.getNewsList();
				//微信分享配置
				// getWxConfig({
				// 	title: this.news.title,
				// 	desc: '@' + this.news.author.userName + ' 在金诺云展发布了动态，欢迎大家来围观',
				// 	link: window.location.href,
				// 	imgUrl: this.news.imgList[0],
				// })

				// document.title = this.news.title + '-金诺云展';
				// let content = this.news.content;
				// var meta = document.getElementsByTagName("meta");
				// for (var i = 0; i < meta.length; i++) {
				// 	if (meta[i].name == 'description') {
				// 		meta[i].content = this.news.content.slice(0, 50);
				// 	}
				// 	if (meta[i].name == 'keywords') {
				// 		meta[i].content = '热门推荐,资讯推荐,行业动态,技术分享,新闻推荐';
				// 	}
				// }

			})
		},
		/**
		 * 加载页面时获取评论,折叠评论,如果有传递index值,该评论不折叠
		 */


		getNewsComment(unFoldIndex) {
			commonApi.getComment(this.news.id,this.currentUser.id,'news').then(res =>{
				this.commentList = res.data.list
				this.commentList.forEach((value,index,array) =>{
					//如果该评论的回复数量大于3，则只显示三条，并且显示查看更多回复
					if(unFoldIndex != index && value.replyList.length > 3){
						value.ifFold = true;
						value.showSize = 3;
						value.foldReplyList = value.replyList;
					}else{
						//如果该评论的回复数量小于等于3则显示所有回复
						value.ifFold = false;
						value.foldReplyList = value.replyList
					}
				})
			})
		},
		/**
		 * 展开评论,每次点击展开3条
		 */
		unFold(index) {
			let size = this.commentList[index].showSize + 3
			this.commentList[index].showSize = size
			this.commentList[index].foldReplyList = this.commentList[index].replyList.slice(0, size)
			if (size >= this.commentList[index].replyList.length) {
				this.commentList[index].ifFold = false
			}
			this.$forceUpdate()
		},
		/**
		 * 发送评论
		 */
		async sendNewsComment() {
			// const result = await judgeIfPhone()
			// if (!result) {
			// 	return
			// }
			//判断是否登录
			this.register = await commonApi.getUserLoginFlag();
			if (this.register) {
			  uni.redirectTo({
			    url: '/pages/account/login/login',
			  })
			}
			
			if (!this.comment) {
				uni.showModal({
					title: "提示",
					content: "评论不能为空",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return
			}
			var that = this
			uni.login({
				provider: 'weixin', //使用微信登录获取code
				success: function (loginRes) {
					//使用微信code获取openid
					commonApi.getOpenId(loginRes.code).then(res => {
						commonApi.msgSecCheck(that.comment,2,res.data.openid).then(response =>{
							if(response.data.result.result.label == 100){
								commonApi.sendComment(that.currentUser.id,that.comment,that.news.id,4).then(response =>{
									that.getNewsComment();
									that.index = 2;
									that.comment = '';
								})
							}else{
								uni.showModal({
									title: "提示",
									content: "内容审核未通过",
									showCancel:false,
									success: function (res) {
										that.comment = ""
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								
							}
						})
					})
				}
			})
		},
		/**
		 * 回复评论
		 */
		async reply(replyType, commentId, target, index) {
			this.ifLogin();
			this.replyData.content = '';
			this.replyData.commentId = commentId;
			this.replyData.replyType = replyType;
			this.replyData.commentIndex = index;
			this.replyData.fromUid = this.currentUser.id;
			this.replyData.fromUname = this.currentUser.userName;

			switch (replyType) {
				//回复评论
				case 1:
					this.replyData.replyId = 0;
					this.replyData.toUid = target.userId;
					this.replyData.toUname = target.userName;
					break;
				//回复别人的回复
				case 2:
					this.replyData.replyId = target.id;
					this.replyData.toUid = target.fromUid;
					this.replyData.toUname = target.fromUname;
					break;
				default:
					break;
			}
			this.replyStr = '回复' + this.replyData.toUname;
			//获取焦点
      this.focus = true
			//this.$refs.comment.focus();
			// self.$nextTick(() => {
			// 	document.getElementById("rinput").focus();
			// })

		},
		/**
		 * 发送回复
		 */
		async sendReply() {
			// const result = await judgeIfPhone()
			// if (!result) {
			// 	return
			// }
			// self.ifLogin();
			if (this.replyData.content.trim() == '') {
				uni.showModal({
					title: "提示",
					content: "评论不能为空",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			imageTextApi.replyVideoCommnet(this.replyData).then(res =>{
				this.replyData.content = '';
				this.replyData.toUname = '';
				this.getNewsComment(this.replyData.commentIndex);
			})
		},
		/**
		 * 失去焦点清空回复
		 * */
		clearInput(e) {
			var ele = e.relatedTarget;
			if (!ele) {
				this.replyData.content = '';
				this.replyData.toUname = '';
			}
		},
		/**
		 * 点赞资讯
		 */
		likeNews() {
			imageTextApi.likeNews(this.currentUser.id,10,this.news.id).then(res =>{
				this.news.likeNews = res.data.collection;
				this.getNewsDetail();
			})
			// this.ifLogin();
			axios.post(`/h5/nocyxcollect/save`, {
				userId: this.currentUser.id,
				type: 10,
				businessId: this.news.id
			}).then(res => {
				this.news.likeNews = res.data.collection;
				this.getNewsDetail();
			})
		},
		/**
		 * 取消点赞
		 */
		cancelLike() {
			imageTextApi.cancelCollect(this.news.likeNews.id).then(res =>{
				this.news.likeNews = '';
				this.getNewsDetail();
			})
		},
		/**
		 *  关注作者
		 */
		attentionAuth() {
			// self.ifLogin();
			commonApi.subscriptionOrNot(this.news.author.id.toString(),this.attentionFlag).then(res =>{
				this.attentionFlag = !this.attentionFlag;
			})
		},
		browseHistory() {
			imageTextApi.browseHistory(this.currentUser.id,this.news.id).then(res =>{

			})

		},
		// goHome(userType, userId) {
		// 	if (userType == 1) {
		// 		window.location.href = '/h5/cloudcomp.html?userId=' + userId;
		// 	} else {
		// 		window.location.href = '/h5/anchorHomepage.html?userId=' + userId;
		// 	}
		// },
		closeShare() {
			this.isShowFriend = false;
		},
		// goTagNews(item) {
		// 	window.location.href = '/h5/tagNewsList.html?activeIndex=1&tagId=' + item.id;
		// },
		// goBack() {
		// 	document.referrer === '' ? window.location.href = '/h5/index.html' : window.history.go(-1);
		// },
	}
};
</script>

<style lang="scss" scoped>
.noComment {
	display: flex;
	justify-content: center;
}
.noComment-text {
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #8F9AA8;
	line-height: 36rpx;
}
.container {
	height: 100vh;
	background-color: #fff;
}
.head {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	z-index: 10;
	.left-icon {
		display: flex;
		align-items: center;
		font-size: $font-size-max;
		font-weight: 600;
		.icon {
			padding-left: 10rpx;
		}
		.avatar {
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			margin: 0px $interval 0px $interval-min;
		}
	}
	.btn {
		margin-right: $interval;
		width: 140rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 35rpx;
		border: 2rpx solid $color-primary;
		color: $color-primary;
		font-size: $font-size-max;
	}
}
.height {
	height: 100rpx;
}
.swiper {
	height: 480rpx;
	box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	.img {
		width: 100%;
    height: 100%;
		/*height: 480rpx;*/
	}
}
.detail-title {
	padding: $interval;
	font-size: $font-size-max + 4;
	font-weight: 600;
}
.nodes {
	padding: 0px $interval;
}
.tags {
	margin-top: $interval-min;
	justify-content: flex-start;
	padding: 0px $interval;
	.t {
		padding: 0px $interval-min;
		line-height: 48rpx;
		background: #eff8f8;
		border-radius: 8rpx;
		color: $color-primary;
		margin-right: 16rpx;
		font-weight: 600;
		margin-bottom: $interval-min;
		font-size: $font-size-min;
	}
}
.tag-item {
    display: inline-block;
    justify-content: center;
    background-color: rgba(229, 245, 245, .7);

}
.tag-item-text {
    font-size: 20rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #029E9D;
    opacity: 1;
    line-height: 42rpx;
    padding-right: 14rpx;
    padding-left: 14rpx;
}
.date-share {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px $interval $interval;
	.date {
		color: $text-color-grey;
	}
	.share {
		width: 120rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		color: $color-primary;
		border: 2rpx solid $color-primary;
		position: relative;
		button {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 3;
			opacity: 0;
		}
	}
}

.comment {
    margin-bottom: 105rpx;
}

.comment-user {
    margin-left: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comment-userInfo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.comment-portrait {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    margin-right: 18rpx;
}
.comment-userName {
    font-size: 24.5rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #8F9AA8;
    line-height: 36rpx;
}
.comment-content {
    font-size: 25rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    margin-left: 131rpx;
    max-width: 482rpx;
}
.comment-content-createat {
    margin-left: 15rpx;
    font-size: 22.4rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #8F9AA8;
    line-height: 36rpx;
}
.comment-reply {
    margin: 23rpx 0 0  131rpx;
}
.reply-user {
    display: flex;
    justify-content: space-between;
}
.reply-userInfo {
    display: flex;
    align-items: center;
}
.reply-portrait {
    width: 37rpx;
    height: 37rpx;
    border-radius: 50%;
}
.reply-name {
    font-size: 25rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #8F9AA8;
    line-height: 36rpx;
    margin-left: 15rpx;
}
.sendComment {
    height: 56rpx;
    background: #EEF0F2;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    // margin-left: 28rpx;
}
.sendComment-img {
    width: 25rpx;
    height: 26rpx;
    margin: 0 12rpx 0 0;
}
.sendComment-input {
    border: 0;
    background-color: #EEF0F2;
}
.send {
    margin-left: 14rpx;
    flex-shrink: 0;
    width: 130rpx;
    height: 62rpx;
    border-radius: 31rpx;
    background-color: #029e9d;
    border: 0;
    font-size: 15px;
    color: #ffffff;
	line-height: 62rpx;
	text-align: center;
}
.likeComment {
    margin-left: 14rpx;
    display: flex;
}
.count-text {
    font-size: 26rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    margin-left: 13.3rpx;
}
.commentCount {
    margin-left: 21rpx;
    display: flex;
}
// .comment {
// 	border-top: 2rpx solid $bg-color;
// 	.item {
// 		display: flex;
// 		align-items: center;
// 		padding: $interval;
// 		border-bottom: 2rpx solid $bg-color;
// 		.avatar {
// 			width: 70rpx;
// 			height: 70rpx;
// 			border-radius: 35rpx;
// 			margin-right: $interval;
// 		}
// 		.info {
// 			.name {
// 				font-size: $font-size-min;
// 				color: $text-color-grey;
// 			}
// 			.text {
// 				font-weight: 600;
// 				display: flex;
// 				margin-top: -10 + $interval-min;
// 				.date {
// 					font-weight: normal;
// 					color: $text-color-grey;
// 					margin-left: $interval-min;
// 				}
// 			}
// 		}
// 	}
// }
.fixed-input {
	display: flex;
	align-items: center;
	position: fixed;
	height: 100rpx;
	width: 100%;
	left: 0px;
	bottom: 0px;
	z-index:3;
		background: #fff;
		box-shadow: 0px 0px 5rpx #ddd;
	.left-input{
	  background-color: $bg-color;
	  display: flex;
	  align-items: center;
	  height: 70rpx;
	  border-radius: 35rpx;
	  margin-left: $interval;
	  padding-left: $interval-min;
	 input{
		 padding-left: 10rpx;
	 }
	}
	.right{
		display: flex;
		align-items: center;
		justify-content: flex-start;
			margin-left: $interval-min;
		.btn {
			width: 140rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 35rpx;
			background-color:  $color-primary;
			color: #fff;
			font-size: $font-size-max;
		}
		.icons{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: $font-size-max;
			image{
				width: 40rpx;
				height:40rpx;
				margin-right: 10rpx;
				margin-left: $interval-min;
			}
		}
	}

}
</style>
